<template>
	<view class="">
		<view class="bg-white pb-10 mb-20" v-for="(item, index) in dataList" :key="item.lessonId">
			<view class="p-10 topLine">
				<uv-row gutter="10">
					<uv-col span="4">
						<img src="http://spnrxma3o.hb-bkt.clouddn.com/images/_____20241212095951.png" alt=""
							class="responsive-img">
					</uv-col>
					<uv-col span="8">
						<view class="h6 text-dark">
							{{ item.title }}
						</view>
						<view class="font-small flex align-items-center mb-10 mt-10">
							<view class="mark">
								{{ item.tags }}
							</view>
						</view>
						<view class="font-22">
							{{ item.description }}
						</view>
					</uv-col>
				</uv-row>
			</view>
			<view class="flex justify-between align-center text-dark font-22 p-10">
				<view>
					<text class="iconfont icon-shipin mr-10" style="font-size: 26rpx;"></text>
					共一集
				</view>
				<view>
					我要购买
				</view>
			</view>
		</view>

		<!-- 加载更多提示 -->
		<view class="text-center p-10" v-if="loading">
			<text>加载中...</text>
		</view>
		<view class="text-center p-10" v-if="noMoreData">
			<text>没有更多数据了</text>
		</view>
	</view>
</template>

<script>
	import {
		lessonInfo
	} from "@/common/api/detail/detail.js"
	import tip from '@/common/util/tip.js'

	export default {
		data() {
			return {
				dataList: [], // 数据列表
				page: 1, // 当前页码
				size: 10, // 每页条数
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
			}
		},
		mounted() {
			this.lessonInfoFn(); // 初始化加载数据
		},
		methods: {
			// 加载数据的方法
			lessonInfoFn() {
				if (this.loading || this.noMoreData) return; // 如果正在加载或没有更多数据，则不再请求
				this.loading = true;

				lessonInfo({
					page: this.page,
					size: this.size
				}).then((res) => {
					if (res.content?.length) {
						this.dataList = this.dataList.concat(res.content); // 将新数据追加到现有数据中
						this.page += 1; // 页码增加
					} else {
						this.noMoreData = true; // 没有更多数据时设置为 true
					}
				}).catch(() => {
					tip.toast('网络异常!');
				}).finally(() => {
					this.loading = false; // 请求结束后重置 loading 状态
				});
			}
		},
		// 监听页面滚动到底部
		onReachBottom() {
			this.lessonInfoFn(); // 触底时加载更多数据
		}
	}
</script>

<style scoped>
	.topLine {
		border-top: 1px solid #f3f3f3;
	}

	.mark {
		display: inline-block;
		border: 1px solid #efa017;
		color: #efa017;
		border-radius: 5px;
		padding: 2px 8px;
		white-space: nowrap;
		text-align: center;
	}

	.responsive-img {
		width: 100%;
		height: auto;
	}
</style>